<template>
  <div >
    <myHeader/>
    <div class="main_content">
      <div class="problem_list">
        <div class="problem_list_header">
          <div class="difficulty">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="status">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="tag">
            <el-dropdown trigger="click">
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="input_div">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              class="input"
            ></el-input>
          </div>
          <div class="select">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="problem_day">
            <el-button type="primary" round>每日一题</el-button>
          </div>
        </div>
        <div class="problem_list_content">
          <div class="problem_list_show">
            <el-table
              :data="tableData"
              style="width: 100%"
              :fit="is_fit"
              :height="show_height"
              @row-click="getProblemDetail"
            >
              <el-table-column
                prop="isFinish"
                label="状态"
                :width="column_width_status"
                sortable
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isFinish === 1"></span
                  ><span class="finish"></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="problemId"
                label="题目序号"
                :width="column_width_id"
              >
              </el-table-column>
              <el-table-column
                prop="problemName"
                label="题目名称"
                :width="column_width_title"
              >
              </el-table-column>
              <el-table-column
                prop="difficulty"
                label="难度"
                :width="column_width_difficulty"
              >
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="最近更新时间"
                :width="column_width_updateTime"
              >
              </el-table-column>
              <el-table-column
                prop="tag"
                label="标签"
                :width="column_width_tag"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="user_info">
          <div>
            <own />
          </div>
        </div>
        <div class="problem_ranking_info">
          <div>
            <simpleProblemRankingList />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/header.vue";
import own from "@/components/own.vue";
import simpleProblemRankingList from "@/components/simple_problem_ranking";

export default {
  name: "ProblemList",
  components: {
    myHeader,
    own,
    simpleProblemRankingList,
  },
  mounted() {
    let that = this;
    // 初始化
    window.fullWidth = document.documentElement.clientWidth;
    that.windowWidth = window.fullWidth; // 宽
    this.column_width_status = (that.windowWidth / 100) * 8;
    this.column_width_title = (that.windowWidth / 100) * 18;
    this.column_width_difficulty = (that.windowWidth / 100) * 8;
    this.column_width_updateTime = (that.windowWidth / 100) * 10;
    this.column_width_tag = (that.windowWidth / 100) * 18;
    this.column_width_id = (that.windowWidth / 100) * 9;
    this.$axios({
      method: "GET",
      url:
        "http://81.70.192.34:8088/problem/search?" +
        "current=" +
        "1" +
        "&size=" +
        "20",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => {
        console.log(res.data.data.records);
        this.tableData = res.data.data.records;
      })
      .catch((error) => {
        console.error(error);
      });
  },
  data() {
    return {
      input: "",
      is_fit: true,
      column_width_id: "",
      column_width_status: "",
      column_width_title: "",
      column_width_difficulty: "",
      column_width_updateTime: "",
      column_width_tag: "",
      tableData: [
        {
          id: "",
          isFinish: 1,
          problemId: "", 
          problemName: "",
          difficulty: "",
          updateTime: "",
          tag: "",
        },
      ],
      show_height: "500px",
    };
  },
  methods: {
    getProblemDetail(row) {
      this.$router.push({
        path: "/problem/problem/details",
        query: {
          problem_id: row.problemId,
        },
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100vw;
}
.main_content {
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
}
.problem_list {
  margin-left: 3vw;
  height: 83vh;
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.problem_list_header {
  height: 5vh;
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e6e6e6;
}
.difficulty {
  margin-left: 2vw;
  line-height: 5vh;
}
.status {
  margin-left: 2vw;
  line-height: 5vh;
}
.tag {
  margin-left: 2vw;
  line-height: 5vh;
}
.input_div {
  margin-left: 8vw;
  line-height: 5vh;
}
.input {
  width: 15vw;
}
.select {
  margin-left: 1vw;
  line-height: 5vh;
}
.problem_day {
  margin-left: 15vw;
  line-height: 5vh;
}
.problem_list_content {
  height: 78vh;
  width: 70vw;
}
.info {
  margin-left: 3vw;
  height: 83vh;
  width: 20vw;
  display: flex;
  flex-wrap: wrap;
}
.user_info {
  height: 43vh;
  width: 20vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}
.problem_ranking_info {
  margin-top: 2vh;
  height: 38vh;
  width: 20vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.problem_list_show {
  text-align: center;
}
.finish,
.no_finish {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  float: left;
  margin-left: 30%;
  margin-top: 3px;
}
.finish {
  background: #1e90ff;
}
.no_finish {
  background: grey;
}
</style>